iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
自我挑戰組

學習HTML&CSS的30天系列 第 24

[Day24]調整元素周圍的留白

  • 分享至 

  • xImage
  •  

今天要學習的是留白,所謂留白並不是毫無意義的空白,
而是讓元素之間保留「間隙」的「空間」。
留白其實是很重要的設計元素,能讓畫面變得更容易瀏覽,
也能使文章變得更容易閱讀喔!


  • 認識留白

    首先來認識與留白有關的「margin」與「padding」屬性。
    假設下圖的四邊形代表網頁元素,元素的邊緣稱為「border」。
    「margin」俗稱「外距」,是從 border 到其他元素的距離;
    「padding」俗稱「內距」,是從 border 到內部(內容)的距離。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216NQxu3Yla0U.png

  • 用「margin」屬性設定元素外側的留白空間

    margin」屬性可在元素的四邊加上留白空間(和其他元素的距離),
    可分別利用「margin-top(上)」、「margin-bottom(下)」、「margin-left(左)」、「margin-right(右)」這四種屬性,控制要在哪一邊加上留白空間。

    主要的設定方式

    設定方法 說明

    數值|在數值加上「px」、「rem」、「%」等單位
    auto|根據相關的屬性值自動設定

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216DONU297CzN.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221010/20152216PRhBFr3bNm.png

    只設定 margin 屬性時,可一次套用到上下左右四邊;
    如果用半形空格分隔,可設定上下與左右的留白,或依照上、右、下、左(順時針)的順序統一設定。
    請參考下表。

    寫法 範例

    margin: 四邊;|margin: 10px;
    margin: 上下 左右;|margin: 10px 20px;
    margin: 上 左右 下;|margin: 10px 20px 30px;
    margin: 上 右 下 左;|margin: 10px 20px 30px 40px;

    因此,假如要在元素的上方加上 30px、左邊加上 100px 的留白時,
    就可以只用「margin」屬性設定,描述方式如下圖。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216pBrFTAYLRJ.png

  • 用「padding」屬性設定元素內側的留白

    如果想在元素內側加上留白,就要使用 padding 屬性
    和 margin 屬性一樣,padding 屬性可在元素的四邊設定「margin-top(上)」、「margin-bottom(下)」、「margin-left(左)」、「margin-right(右)」等要留白的位置;
    只要用半形空格分隔,就能設定上下與左右的留白,或依上、右、下、左(順時針)的順序統一設定。

    主要的設定方式

    設定方法 說明

    數值|在數值加上「px」、「rem」、「%」等單位
    auto|根據相關的屬性值自動設定

    https://ithelp.ithome.com.tw/upload/images/20221010/201522167bhx4sNIOj.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221010/20152216DaSv9WkWFf.png

    • 藍色方塊的邊框與內容(文字)間產生了 40px 的留白。
  • 活用留白可以將元素分組

    留白不僅能給元素更多空間、提高易讀性,還有將元素「區隔」和「分組」的功能。
    舉例來說,我們通常會認為位置相近的物件就是「有關聯」。
    請看下圖的排版範例。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216aewMQ4h1k9.png

    上面的範例乍看之下,很容易會看成「美麗的 垃圾」、「花 骯髒的」。為什麼呢?

    這是因為我們會自動把位置接近的文字視為同一個群組。
    因此在排版時,一定要避免把無關的資料放在一起,這是非常重要的關鍵。
    這時候,就可以利用留白來區隔。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216sOiDeKlpJt.png

    如上圖所示,只要調整留白的比例,讓相關的文字距離更近、無關的文字距離更遠,
    這樣就能自然辨識為「美麗的 花」與「垃圾 骯髒的」了。

    Point
    -----
    利用留白可以將相關的資料分成同組。
    

    接著我們再思考圖片、文字與留白的關係。下面的圖說文字是每張花卉照片的名稱,
    但是目前的安排會讓人覺得「很難看懂花卉名稱到底是屬於上面還是下面的照片」。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216OuSNe5mzPH.png

    這種情況也可以善用留白來分組。
    在不同的群組間插入留白,讓具有關聯性的照片與文字變成同一組,
    每個群組之間都要有足夠的留白,並避免讓無關聯的資料太過接近。
    修改的結果如下圖所示,「夏菫」與「玫瑰」到底是指哪一種花,變得一目了然。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216Svv2OCcRfA.png

  • 建議在邊框與文字之間加入留白

    設計網頁的內文時,如果文字和邊框間沒有距離,會變得很難閱讀,而且也不好看。
    有的人可能會說「很擠也沒關係,只要放的進去就好」,但如果想設計好作品,就不能這樣想。
    我們必須思考對瀏覽網頁的使用者而言,怎樣設計留白區域才會更容易閱讀。
    運用 CSS 的 padding 屬性,就可以在元素內容(文字)和遍框之間加上留白。

    padding 的設定依文字大小而異,以內文來說,建議至少為文字大小的 1~1.5倍
    假設內文的文字大小為 16px,建議加上 20px 左右的留白,會變得更清楚易讀。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216eWnbkvQSip.png

    除了內文之外,標題等較短的句子也一樣,建議在文字四周保留較大的空間。

    https://ithelp.ithome.com.tw/upload/images/20221010/20152216C74z1n7bQA.png


  • 小小知識:參考善用留白的網站設計
    使用大量留白可以完成風格高雅、感覺沉穩的設計。
    而且只要妥善運用留白,還能設計出引導使用者瀏覽網頁的動線,並且襯托出希望聚焦的重點。
    建議多研究各家網站的留白活用方法,當作設計時的參考。

https://ithelp.ithome.com.tw/upload/images/20221010/201522169gcpRmrH6V.png

  • Apple:https://www.apple.com
  • 一張影像對應一句標題與標語,畫面簡單,沒有多餘的元素,
    引導使用者把注意力集中在產品及內容上。

今天的內容雖然微不足道,但是一點一滴累積下來,
會讓整個網站的易讀性產生很大的變化。
建議大家徹底了解 margin、padding 的意義,並且在網頁中善加運用喔!

那麼我是沒魚,這是我的第二十四天,距離完賽剩下六天!/images/emoticon/emoticon29.gif

<上一篇> [Day23]設定元素的寬度與高度
<下一篇> [Day25]設定元素的邊框&美化項目清單


上一篇
[Day23]設定元素的寬度與高度
下一篇
[Day25]設定元素的邊框&美化項目清單
系列文
學習HTML&CSS的30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言